<template>
	<div class="clearfix">
		<a-upload list-type="picture-card" :file-list="fileList" @change="handleChange"
			:showUploadList="{showPreviewIcon:false}" :headers="{token:this.$store.state.token}"
			:customRequest="customRequest"
			>
			<div v-if="fileList.length < num">
				<plus-outlined />
				<div class="ant-upload-text">{{title}}</div>
			</div>
		</a-upload>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</div>
</template>
<script>
	import envs from '../env.js'
	import upload from '../utils/upload.js'
	import language from '../utils/language.js'
	import systemApi from '../api/system.js'
	import {message} from 'ant-design-vue'
	import {
		PlusOutlined
	} from '@ant-design/icons-vue';

	function getBase64(file) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => resolve(reader.result);
			reader.onerror = error => reject(error);
		});
	}
	export default {
		/*接受参数*/
		props: {
			num: {
				type: Number,
				default: 1
			},
			imgUrls: {
				type: Array,
			},
			title: {
				type: String,
				default: '添加图片'
			}
		},
		components: {
			PlusOutlined,
		},
		mounted() {
			if(this.imgUrls.length > 0){
			    this.fileList = this.imgUrls
			}
			this.uploadPath()
		},
		data() {
			return {
				envs,
				previewVisible: false,
				previewImage: '',
				fileList: [],

				upload_path: '',
				static_path: ''
			};
		},
		methods: {
			// 关闭图片预览
			handleCancel(e) {
				this.previewVisible = false;
			},
			// 图片预览
			async handlePreview(file) {
				if (!file.url && !file.preview) {
					file.preview = await getBase64(file.originFileObj);
				}
				this.previewImage = file.url || file.preview;
				this.previewVisible = true;
			},
			handleChange({
				fileList
			}) {
				this.fileList = fileList
			},
			
			customRequest(file){
				if (!upload.fileTypeCheck(file.file)) {
					message.warning(language.imgTypeError);
					return false
				}
				if (!this.upload_path) {
					message.error('未获取到上传地址')
					return false
				}
				if (!this.static_path) {
					message.error('未获取到静态资源地址')
					return false
				}
				const hide = message.loading('正在上传，请稍等！', 0)
				upload.uploadFile(this.upload_path, file.file, this.$store.state.token, this.bucket).then(res => {
					setTimeout(hide, 100) // 终止loading状态
					if (res.status == 1 && res.result?.url != '') {
						for (var i = 0; i < this.fileList.length; i++) {
							if(this.fileList[i].uid == file.file.uid){
								this.fileList[i].status = 'done'
								break
							}
						}
						this.$emit('updateImg', {
							uid: file.uid,
							url: res.result.url
						})
					} else {
						message.error(language.imgUploadError);
					}
				})
			},

			// 获取上传地址
			uploadPath() {
				systemApi.getUploadPath().then(res => {
					if (res.status == 1) {
						if (res.result?.adminUploadPath) {
							this.upload_path = res.result?.adminUploadPath
						}
						if (res.result?.staticPath) {
							this.static_path = res.result?.staticPath
						}
					}
				})
			},
			removeEvent(e) { // 删除图片
				this.$emit('deleteImg', e.uid)
			},
			recoveryEvent(e) {
				let arr = []
				for (var property in e) {
					let data = {
						uid: property,
						name: property + 'image',
						status: 'done',
						url: e[property]
					}
					arr.push(data)
				}
				this.fileList = arr
			},
			getData(data){
				this.fileList = data
			}
		}
	};
</script>
<style>
	/* you can make up upload button and sample style by using stylesheets */
	.ant-upload-select-picture-card i {
		font-size: 32px;
		color: #999;
	}

	.ant-upload-select-picture-card .ant-upload-text {
		margin-top: 8px;
		color: #666;
	}
</style>